<template>
  <u-dialog :title="title" :show.sync="show" :auto-close="false" :append-to-body="true" :footer="false" width="1300px"  @cancel="cancel">
    <u-filtered>
      <el-form :inline="true" :model="listQuery" class="search-form">
        <el-form-item label="商户" prop="merchantName">
          <el-input v-model="listQuery.merchantName" placeholder="关键词" clearable />
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          <el-input v-model="listQuery.dept" placeholder="部门" clearable />
        </el-form-item>
        <el-form-item label="工号" prop="jobNo">
          <el-input v-model="listQuery.jobNo" placeholder="关键词搜索" clearable />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="listQuery.name" placeholder="关键词搜索" clearable />
        </el-form-item>
        <el-form-item label="餐卡" prop="mealCardNo">
          <el-input v-model="listQuery.mealCardNo" placeholder="关键词搜索" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="hdlFilter">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-download" @click="hdlExport">导出</el-button>
        </el-form-item>
      </el-form>
    </u-filtered>

    <u-table
      :data="list"
      :loading="listLoading"
      :options="listOptions"
      :columns="columns"
      :pagination.sync="listQuery"
      :fetch="hdlList"
    />
  </u-dialog>
</template>

<script>

import MallFloor from "@/components/mall/floor.vue";

export default {
  name: 'Detail',
  components: {MallFloor},
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({})
      }
    }
  },
  data() {
    return {
      api: this.$u.api.PluginsGuideMeal,
      title: '查看详细',
      // 表格
      columns: [
        {
          prop: 'jobNo',
          label: '工号'
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'dept',
          label: '部门'
        },
        {
          prop: 'enterpriseName',
          label: '公司'
        },
        {
          prop: 'merchantName',
          label: '商户'
        },
        {
          prop: 'contractNo',
          label: '合同编码'
        },
        {
          prop: 'mealCardNo',
          label: '餐卡'
        },
        {
          prop: 'mealCost',
          label: '充值金额'
        }
      ],
      list: [],
      listLoading: false,
      listOptions: {
        stripe: true // boolean 斑马纹
      },
      merchantQuery: {},
      inputDateTimeRange: [],
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        id: ''
      }
    }
  },
  watch: {
      show(newVal) {
        this.listQuery={
          pageNumber: 1,
          pageSize: 10,
          totalCount: 1,
          id: ''
        }
        // 监听是否弹框,决定是否初始化数据
        if (newVal) {
          let { id } = this.data
          this.listQuery.id = id
          this.hdlList()
        }
      }
  },
  methods: {
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      // 查询分页数据
      self.api.detail(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list
        // 获取分页数据,总页数
        self.listQuery.totalCount = res.data.totalCount
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    },
    /**
     *  导出事件
     * @returns {boolean}
     */
    hdlExport() {
      const self = this
      // 模态对话框组件
      self.$confirm('此操作将导出数据，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        // 处理确认事件
        self.api.detailExport(this.listQuery).then(() => {
          // 通知信息
          self.$u.msg('导出成功')
        })
      }).catch(() => {
      })
    }
  }
}

</script>

<style scoped>

</style>
